<template lang="html">
  <div class="speciflc">
  	<div class="nav">
   		<router-link tag="div" to="/index/home/remind" class="remind">提醒</router-link>
   		<div class="centers">
   			<router-link tag="div" to="/index/home/course/detaile" class="schedule">课表</router-link>
   			<router-link tag="div" to="/index/home/notes" class="note">笔记</router-link>
   		</div>
   		<div class="imgs">
   			<img src="../../../images/xiaoxi3.png">
   		</div>
   	</div>
   <div class="center">
   	<div class="year_m">{{ year }}.{{ month }}.{{ day }}</div>
   	<div class="centent">
   		<div class="time">
   			<div class="times">
   				<span>20:00-21:00</span>
   			</div>
   			<div class="case">
   				<ul>
   					<li class="raw"></li>
   					<li class="wire"></li>
   				</ul>
   			</div>
   			<div class="minute">
   				<span>英语阅读</span>
   				<span class="minute_time">1小时</span>
   			</div>
   			<div class="images">
   				<img src="../../../images/pen.png">
   			</div>
   		</div>
   	</div>
   	<div class="centent">
   		<div class="time">
   			<div class="times">
   				<span>16:20-18:00</span>
   			</div>
   			<div class="case">
   				<ul>
   					<li class="top_wire"></li>
   					<li class="raw box_x"></li>
   					<li class="wire"></li>
   				</ul>
   			</div>
   			<div class="minute">
   				<span>英语口语</span>
   				<span class="minute_time">1小时40分钟</span>
   			</div>
   			<div class="images">
   				<img src="../../../images/pen.png">
   			</div>
   		</div>
   	</div>
   	<div class="centent">
   		<div class="time">
   			<div class="times">
   				<span>14:00-15:00</span>
   			</div>
   			<div class="case">
   				<ul>
   					<li class="top_wire"></li>
   					<li class="raw box_x box_s"></li>
   					<li class="wire wire_s"></li>
   				</ul>
   			</div>
   			<div class="minute minute_k">
   				<span>英语口语</span>
   				<span class="minute_time">1小时</span>
   			</div>
   			<div class="images">
   				<img src="../../../images/book.png">
   			</div>
   		</div>
   	</div>
   		<div class="centent">
   		<div class="time">
   			<div class="times">
   				<span>11:00-12:00</span>
   			</div>
   			<div class="case">
   				<ul>
   					<li class="top_wire wire_s"></li>
   					<li class="raw box_x box_s"></li>
   					<li class="wire wire_s"></li>
   				</ul>
   			</div>
   			<div class="minute minute_k">
   				<span>物理力学</span>
   				<span class="minute_time">1小时</span>
   			</div>
   			<div class="images">
   				<img src="../../../images/book.png">
   			</div>
   		</div>
   	</div>
   	<div class="centent">
   		<div class="time">
   			<div class="times">
   				<span>08:30-11:00</span>
   			</div>
   			<div class="case">
   				<ul>
   					<li class="top_wire wire_s"></li>
   					<li class="raw box_x box_s"></li>
   					<li class="wire wire_s"></li>
   				</ul>
   			</div>
   			<div class="minute minute_k">
   				<span>数学</span>
   				<span class="minute_time">1小时30分钟</span>
   			</div>
   			<div class="images">
   				<img src="../../../images/book.png">
   			</div>
   		</div>
   	</div>
   	<div class="centent cen_box">
   		<div class="time">
   			<div class="times">
   				<span>06:30-07:30</span>
   			</div>
   			<div class="case">
   				<ul>
   					<li class="top_wire wire_s"></li>
   					<li class="raw box_x box_s"></li>
   				</ul>
   			</div>
   			<div class="minute minute_k">
   				<span>语文写作</span>
   				<span class="minute_time">1小时</span>
   			</div>
   			<div class="images">
   				<img src="../../../images/book.png">
   			</div>
   		</div>
   	</div>
   </div>

   

  </div>
</template>

<script>
export default {
  name:"speciflc",
  data(){
    return{
      year:"",
      month:"",
      day:""
    }
  },
  created(){
   // 获取本地存储
   this.year = sessionStorage.getItem("year",this.year)
   this.month = sessionStorage.getItem("month",this.month)
   this.day = sessionStorage.getItem("day",this.day)

  }
}
</script>

<style scoped lang="less">
.nav{
	width: 100%;
	display: flex;
	height: 90/100rem;
	background: #3DAE95;
	
}
.centers{
	width: 400/100rem;
	flex: 1;
	display: flex;
	.schedule,.note{
		width: 200/100rem;
		flex: 1;
		height: 62/100rem;
		margin-top: 15/100rem;
		line-height: 60/100rem;
		text-align: center;
		font-size: 38/100rem;
	}
}

.remind,.imgs{
	flex: 1;
	color: #ffffff;

		
}
.remind{
	line-height: 110/100rem;
	text-align: center;
	font-size: 28/100rem;
	color: #ffffff;
	
}


.schedule{
	border-left: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	border-radius: 10px 0 0 10px;
	background: #fff;
	color: #3DAE95;

}
.note{
	border-right: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	border-radius: 0 10px 10px 0;
	color: #ffffff;
}
.imgs{
		line-height: 90/100rem;
		text-align: center;
	
		flex: 1;
}
.imgs img{
	width: 60/100rem;
	color: #ffffff;

}

.el-date-editor{
	
	margin-top: 20/100rem;
}

.center{
	margin-top: 10/100rem;
	
	background: #fff;
	.year_m{
		height: 90/100rem;
		background: #fff;
		font-size: 30/100rem;
		color: #3DAE95;
		line-height: 150/100rem;
		margin-left: 30/100rem;
	}
	.centent{
		font-size: 30/100rem;
		.time{
			height: 90/100rem;
			overflow: hidden;
			div{
				float: left;
				padding: 0 20/100rem 0 20/100rem;
			}
			.times{
				line-height: 90/100rem;
			}
			.case{
					height:  90/100rem;
				ul{
					.raw{
						margin-top: 30/100rem;
						width: 20/100rem;
						height: 20/100rem;
						border-radius: 50%;
						background: #B5B5B5;
					}
					.wire,.top_wire{
						border: 1/100rem solid #999;
						height: 40/100rem;
						width: 0;
						margin-left: 8/100rem;
					}
					.box_x{
						margin-top: 0;
					}
					.box_s{
						background: #3DAE95;
					}
					.wire_s{
						border: 1/100rem solid #3DAE95;
					}
				
				}
			}
			.minute{
				text-align: center;
				margin-top: 10/100rem;
				border:1/100rem solid #3DAE95;
				width: 300/100rem;
				padding: 15/100rem 0 15/100rem 15/100rem;
				border-radius: 10/100rem;
				color: #5C5C5C;
				.minute_time{
					font-size: 12/100rem;
				}
				
			}
			.minute_k{
				background: #3DAE95;
				color:#fff; 
			}
			.images{
				width: 50/100rem;
				height: 100/199rem;
				line-height: 90/100rem;
				margin-left: 20/100rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
			
		}

	}
	.cen_box{
		padding-bottom: 100/100rem;
	}
}

</style>
